<template>
  <div>
    <x-header :left-options="{ backText: '', preventGoBack: true }" title="续贷进度查询"
              @on-click-back="headerBackFun"></x-header>
    <div class="content">
      <timeline>
        <timeline-item>
          <h4 class="recent">提交申请</h4>
          <p class="desc">2023-04-17 12:00:00</p>
        </timeline-item>
        <template v-if="step == 1">
          <timeline-item class="type1">
            <h4 style="color: #3B80CA;">
              客户经理审批
              <sup>审批中</sup>
            </h4>
          </timeline-item>
        </template>
        <template v-else-if="step == 2">
          <timeline-item class="type2">
            <h4 style="color: #D13E2A;">
              客户经理审批
              <sup>审批未通过</sup>
            </h4>
            <p style="color: #D13E2A;">不满足续贷条件,不能进行续贷业务申请</p>
          </timeline-item>
        </template>
        <template v-else>
          <timeline-item>
            <h4 class="recent">
              客户经理审批
            </h4>
            <p class="desc">2023-04-17 12:00:00</p>
          </timeline-item>
        </template>
      </timeline>
    </div>
    <div style="padding: 10px;margin: 2rem 0;" v-if="step == 3">
      <x-button type="warn" action-type="button" @click.native="sure"> 续贷确认</x-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Timeline,
  TimelineItem
} from 'vux'
import {
  Icon,
  Dialog
} from "vant";

export default {
  name: "apply",
  components: {
    Timeline,
    TimelineItem,
  },
  data() {
    return {
      step: 1
    };
  },
  mounted() {
    let timer = setInterval(() => {
      this.step++
      if (this.step >= 3) {
        clearInterval(timer)
      }
    }, 3000)
  },
  methods: {
    sure() {
      this.$router.push("/refinance/renewalComfirmation")
      console.log('跳转确认')
    },
    headerBackFun() {
      history.back()
    },
  },
};
</script>

<style scoped lang="less">
.vux-header {
  background-color: #f4f4f4;

  /deep/ .vux-header-left .left-arrow::before {
    border: 2px solid #1d2129 !important;
    border-width: 2px 0 0 2px !important;
  }

  /deep/ .vux-header-title {
    color: #1d2129 !important;
  }

  .vux-header-right a {
    color: #1d2129;
  }
}

.content {
  font-size: 1.2rem;
  padding-left: 5rem;

  /deep/ .vux-timeline-item-content {
    padding: 0 0 1.5rem 2rem;
  }

  p {
    color: #888;
    font-size: 0.8rem;
  }

  h4 {
    color: #666;
    font-weight: normal;
  }

  .recent {
    color: rgb(4, 190, 2)
  }

  /deep/ .type1 {
    .vux-timeline-item-color {
      background-color: #3B80CA;
    }
  }

  /deep/ .type2 {
    .vux-timeline-item-color {
      background-color: #D13E2A;
    }
  }
}

.desc {
  color: #A3A2AA;

  .title {
    font-size: 1.2rem;
  }
}
</style>
